<template>
  <div class="bg">
    <div class="top">
      <div class="ico1">
        <img src="../assets/index/logo.png" alt>
      </div>
      <div class="title">盛瑞分账管理系统</div>
    </div>
    <div class="topBox">
      <div class="left_box">
        <div class="top_box">
          <div class="top_l">
            <img src="../assets/index/11.png" alt>
            城市代理实时分润
          </div>
          <!-- <i class="el-icon-arrow-right"></i> -->
        </div>
        <div class="bottom" v-if="quanCount.length > 0">
          <div class="item" v-for="(item, index) in quanCount" :key="index">
            <div :id="`quan${index}`" style="width:130px;height:130px"></div>
            <!-- <span>{{item.name}}</span> -->
          </div>
        </div>
      </div>
      <div class="right_box">
        <div class="numberBox">
          <img src="../assets/index/111.png" style="width: 260px;height:100%" alt>
          <div class="title">统计总收益</div>
          <div>
            <i class="num">{{ sum.earningsAmount }}</i>
            <span class="size">万</span>
          </div>
        </div>
        <div class="numberBox">
          <img src="../assets/index/222.png" style="width: 260px;height:100%" alt>
          <div class="title">统计节省总电费</div>
          <div>
            <i class="num">{{ sum.conserveElectricity }}</i>
            <span class="size">万</span>
          </div>
        </div>
        <div class="numberBox">
          <img src="../assets/index/333.png" style="width: 260px;height:100%" alt>
          <div class="title">统计减排的总碳量</div>
          <div>
            <i class="num">{{ sum.carbonEmissions }}</i>
            <span class="size">万</span>
          </div>
        </div>
      </div>
    </div>
    <div class="centerBox">
      <div class="left_box">
        <div class="top_box">
          <div class="top_l">
            <img src="../assets/index/22.png" alt>
            统计客户类型数量
          </div>
          <!-- <i class="el-icon-arrow-right"></i> -->
        </div>
        <div id="bing" style="width:400px;height:240px"></div>
      </div>
      <div class="center_box">
        <div class="top_box">
          <div class="top_l">
            <img src="../assets/index/33.png" alt>
            各地区总收益
          </div>
          <!-- <i class="el-icon-arrow-right"></i> -->
        </div>
        <div id="list" style="width:100%;height:240px"></div>
      </div>
      <div class="right_box">
        <div class="top_box">
          <div class="top_l">
            <img src="../assets/index/44.png" alt>
            销售精英排行榜top10
          </div>
          <!-- <i class="el-icon-arrow-right"></i> -->
        </div>
        <div class="nav_box">
          <div class="nav">
            <span>排名</span>
            <span>姓名</span>
            <span>分润金额</span>
          </div>
          <div class="content" v-for="(item, index) in saleNum" :key="item.name">
            <span v-if="index < 3">
              <img :src="require(`../assets/index/${index + 1}.png`)" style="width:25px;" alt>
            </span>
            <span v-else>{{index + 1}}</span>
            <span>{{item.name}}</span>
            <span>{{item.value}}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="bottomBox">
      <div class="left_box">
        <div class="top_box">
          <div class="top_l">
            <img src="../assets/index/55.png" alt>
            近半年每月的收益
          </div>
          <!-- <i class="el-icon-arrow-right"></i> -->
        </div>
        <div id="quXian" style="width:850px;height:190px"></div>
      </div>
      <div class="right_box">
        <div class="top_box">
          <div class="top_l">
            <img src="../assets/index/66.png" alt>
            收益排行榜
          </div>
          <div>
            <span class="sele" :class="month == '2' ? 'active': ''" @click="getMoney('2')">上月</span>
            <span class="sele" :class="month == '1' ? 'active': ''" @click="getMoney('1')">本月</span>
            <!-- <i class="el-icon-arrow-right"></i> -->
          </div>
        </div>
        <div class="bottom_box">
          <div id="count" style="width:100%;height:170px"></div>
          <!-- <div
            class="bg"
            :style="`border: 1px solid ${item.color}`"
            v-for="(item, index) in compData"
            :key="index"
          >
            <div class="title">{{item.tit}}</div>
            <span
              class="index"
              :style="`border: 1px solid ${item.color};color: ${item.color}`"
            >{{index + 1}}</span>
            <div class="heng" :style="`background: ${item.bgc}`"></div>
            <span class="value">{{item.progress}}</span>
          </div>-->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import {
  homeNum,
  homeCustom,
  homeArea,
  homeTop,
  homeMonth,
  homeRank,
  homeCity
} from "../api/index/index.js";
import { setTimeout } from "timers";
export default {
  name: "Index",
  data() {
    return {
      sum: {},
      saleNum: [],
      month: "1",
      quanCount: []
    };
  },
  mounted() {
    this.getApi();
    this.getMoney("1");
  },
  methods: {
    getMoney(index) {
      this.month = index;
      homeRank(index).then(res => {
        if (res.code == 200) {
          this.getCount(res.data);
        }
      });
    },
    getApi() {
      homeNum().then(res => {
        if (res.code == 200) {
          this.sum = res.data;
        }
      });
      homeCustom().then(res => {
        if (res.code == 200) {
          this.getYuan(res.data);
        }
      });
      homeArea().then(res => {
        if (res.code == 200) {
          this.getList(res.data);
        }
      });
      homeTop().then(res => {
        if (res.code == 200) {
          this.saleNum = res.data;
        }
      });
      homeMonth().then(res => {
        if (res.code == 200) {
          this.getQuXian(res.data);
        }
      });
      homeCity().then( res => {
        if(res.code == 200) {
          this.quanCount = res.data;
          res.data.forEach( (v, i) => {
             this.$nextTick(() => {
              this.getQuan(v, i);
             })
          })
        }
      })
    },
    getQuXian(data) {
      let myDate = [];
      let myNum = [];
      data.forEach(v => {
        myDate.push(v.month);
        myNum.push(v.earningsAmount);
      });
      var fontColor = "#30eee9";
      var chartDom = document.getElementById("quXian");
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        grid: {
          left: "5%",
          right: "10%",
          top: "20%",
          bottom: "15%",
          containLabel: true
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "line",
            lineStyle: {
              color: "rgba(50, 216, 205, 1)"
            }
          }
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: 1,
            axisLine: {
              show: true,
              lineStyle: {
                width: 2,
                color: "#50b7c7"
              },
              symbol: ["none", "arrow"],
              symbolSize: [8, 12],
              symbolOffset: [0, 10]
            },
            axisLabel: {
              color: "#A1A7B3"
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },

            data: myDate
          }
        ],
        yAxis: [
          {
            type: "value",
            // name: "万",
            padding: 5,
            // max: 1000,
            splitLine: {
              show: true,
              lineStyle: {
                color: "#A1A7B3",
                type: "dashed"
              }
            },
            axisLine: {
              show: true,
              lineStyle: {
                width: 2,
                color: "#50b7c7"
              },
              symbol: ["none", "arrow"],
              symbolSize: [8, 12],
              symbolOffset: [0, 10]
            },
            axisLabel: {
              show: true,
              margin: 10,
              textStyle: {
                color: "#A1A7B3"
              }
            },
            axisTick: {
              show: false
            }
          }
        ],
        series: [
          {
            name: "收益",
            type: "line",
            smooth: true,
            stack: "总量",
            symbolSize: 5,
            showSymbol: false,
            itemStyle: {
              normal: {
                color: "#23D0C4",
                lineStyle: {
                  color: "#23D0C4",
                  width: 2
                }
              }
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(50, 216, 205, 1)"
                    },
                    {
                      offset: 1,
                      color: "rgba(255, 255, 255, 0.2)"
                    }
                  ],
                  false
                )
              }
            },
            data: myNum
          }
        ]
      };
      option && myChart.setOption(option);
    },
    getList(data) {
      var chartDom = document.getElementById("list");
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            show: true,
            status: "shadow",
            z: -1,
            shadowStyle: {
              color: "rgba(251, 169, 128, 0.1)"
            },
            type: "shadow"
          }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "6%",
          containLabel: true
        },
        xAxis: [
          {
            position: "bottom",
            type: "category",
            axisLine: {
              show: true,
              lineStyle: {
                width: 2,
                color: "#50b7c7"
              },
              symbol: ["none", "arrow"],
              symbolSize: [8, 12],
              symbolOffset: [0, 10]
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: true,
              rotate: 0,
              fontSize: 12,
              color: "rgba(0, 0, 0, 1)"
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(193, 207, 220, 1)",
                width: 0,
                type: "dashed"
              }
            },
            gridIndex: 0,
            data: data.name
          }
        ],
        yAxis: [
          {
            name: "万",
            type: "value",
            position: "left",
            // minInterval: 50, 坐标最大值
            axisLine: {
              show: true,
              lineStyle: {
                width: 2,
                color: "#50b7c7"
              },
              symbol: ["none", "arrow"],
              symbolSize: [8, 12],
              symbolOffset: [0, 10]
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: true,
              rotate: 0,
              fontSize: 12,
              color: "rgba(0, 0, 0, 1)"
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(193, 207, 220, 1)",
                width: 1,
                type: "solid"
              }
            }
          }
        ],
        series: [
          {
            name: "总收益(万元)",
            type: "bar",
            data: data.value,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "rgba(251, 169, 128, 1)"
                  },
                  {
                    offset: 1,
                    color: "rgba(247, 203, 107, 1)"
                  }
                ])
              }
            },
            label: {
              normal: {
                show: false,
                position: "top",
                formatter: "{c}万",
                textStyle: {
                  color: "rgba(219, 141, 73, 1)",
                  fontSize: 18,
                  fontFamily: "DIN",
                  fontWeight: "bold"
                }
              }
            },
            barMaxWidth: "25%"
          }
        ]
      };
      option && myChart.setOption(option);
    },
    getYuan(data) {
      let myData = [];
      data.forEach(v => {
        myData.push({
          name: v.customType,
          value: v.customNum
        });
      });
      var chartDom = document.getElementById("bing");
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        color: ["#81caff", "#efbda1", "#bfa8fe", "#efa1c5", "#efe7a1"],
        legend: {
          orient: "vertical",
          right: "20",
          bottom: "20"
        },
        series: [
          {
            name: "需求类型占比",
            type: "pie",
            center: ["50%", "55%"],
            radius: "80%",
            left: "-100",
            label: {
              normal: {
                show: false
              }
            },
            labelLine: {
              show: false,
              length: 0,
              length2: 0
            },
            label: {
              normal: {
                show: true,
                position: "inside",
                formatter: "{value|{c}}",
                color: "#ffffff",
                fontSize: 18,
                rich: {
                  value: {
                    fontSize: 18,
                    color: "#ffffff"
                  }
                }
              }
            },
            data: myData
          }
        ]
      };
      myChart.setOption(option);
    },
    getQuan(item, index) {
      var chartDom = document.getElementById(`quan${index}`);
      var myChart = echarts.init(chartDom);
      var option;
      const chartData = { num: item.value };
      const seriesData = [];
      const legendData = [];
      const nameList = [
        { key: "num", text: "", left: "center", right: null, bottom: "100%" }
      ];
      nameList.forEach((item, i) => {
        if (item.key) {
          seriesData.push({
            value: chartData[item.key],
            show: true,
            name: item.text
          });
          legendData.push({
            orient: "horizontal",
            bottom: item.bottom,
            left: item.left,
            right: item.right,
            textStyle: {
              color: "#fff",
              fontSize: 14
            },
            padding: [10, 20],
            icon: "circle",
            backgroundColor: "rgba(0,102,255,0.2)",
            itemStyle: {},
            borderWidth: 0,
            borderColor: "#0066FF",
            borderRadius: 100,
            formatter(text) {
              return text;
            }
          });
        }
      });

      option = {
        legend: legendData,
        tooltip: {
          rich: {}
        },
        color: ["#30f3e3"],
        series: [
          {
            name: "",
            type: "pie",
            center: ["50%", "50%"],
            radius: ["80%", "90%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10
            },
            label: {
              show: true,
              position: "center",
              // fontFamily: "fzzz",
              color: "#6a6a6a",
              fontSize: 17,
              fontWeight: 700,
              formatter() {
                return `${item.name}\n\n${chartData.num}万`;
              }
            },

            labelLine: {
              show: false
            },
            data: seriesData
          }
        ]
      };
      option && myChart.setOption(option);
    },
    getCount(data) {
      let myName = [];
      let myNum = [];
      data.forEach(v => {
        myName.push(v.name);
        myNum.push(v.value);
      });
      var chartDom = document.getElementById("count");
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        backgroundColor: "#ffffff",
        tooltip: {
          trigger: "axis",
          show: true,
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {
          show: false
        },
        grid: {
          left: "10%",
          right: "10%",
          bottom: "10%",
          containLabel: true
        },
        xAxis: [
          {
            splitLine: {
              show: false
            },
            type: "value",
            show: false
          }
        ],
        yAxis: [
          {
            splitLine: {
              show: false
            },
            axisLine: {
              //y轴
              show: false
            },
            type: "category",
            axisTick: {
              show: false
            },
            inverse: true,
            data: myName,
            axisLabel: {
              color: "#303133",
              fontSize: 14
            }
          }
        ],
        series: [
          {
            name: "收益",
            type: "bar",
            barWidth: 8, // 柱子宽度
            label: {
              show: true,
              position: "right", // 位置
              color: "#303133",
              fontSize: 14,
              distance: 15, // 距离
              formatter: "{c}" // 这里是数据展示的时候显示的数据
            }, // 柱子上方的数值
            itemStyle: {
              barBorderRadius: [10, 10, 10, 10], // 圆角（左上、右上、右下、左下）
              color: "#419fff"
            },
            data: myNum
          }
        ]
      };
      option && myChart.setOption(option);
    }
  }
};
</script>

<style scoped lang="scss">
.active {
  background-color: #3188c7 !important;
  color: #fff;
}
.bg {
  .bottomBox {
    display: flex;
    margin: 10px 20px 0 20px;
    .bottom_box {
      padding: 0 40px;
      height: 190px;
      overflow: auto;
      .bg {
        position: relative;
        display: flex;
        width: 100%;
        margin: 10px 0;
        border: 1px solid #9084ff;
        height: 20px;
        border-radius: 20px;
        .value {
          position: absolute;
          right: 50px;
          font-size: 14px;
          top: 50%;
          transform: translateY(-50%);
        }
        .title {
          position: absolute;
          left: 30px;
          font-size: 12px;
          top: 50%;
          transform: translateY(-50%);
          color: #fff;
        }
        .index {
          position: absolute;
          top: 50%;
          background-color: #fff;
          transform: translateY(-50%);
          left: -13px;
          width: 25px;
          height: 25px;
          border-radius: 25px;
          color: #9084ff;
          text-align: center;
          line-height: 22px;
          font-size: 14px;
          border: 2px solid #9084ff;
        }
        .heng {
          position: absolute;
          z-index: -1;
          left: 0;
          top: 0;
          width: 80%;
          background-color: #9084ff;
          height: 20px;
          border-radius: 20px;
        }
      }
    }
    .right_box {
      border: 1px solid rgb(226, 226, 226);
      box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.3);
      margin: 2px 0px 0 0px;
      border-radius: 5px;
      width: 49%;
      .top_box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 7px 20px;
        border-bottom: 1px solid #eee;
        .sele {
          cursor: pointer;
          display: inline-block;
          width: 60px;
          height: 25px;
          line-height: 25px;
          margin-right: 10px;
          font-size: 12px;
          font-weight: 700;
          text-align: center;
          border-radius: 10px;
          background-color: #c8e8ff;
        }
        .top_l {
          display: flex;
          align-items: center;
          font-weight: 700;
          img {
            width: 30px;
            margin-right: 10px;
          }
        }
      }
    }
    .left_box {
      border: 1px solid rgb(226, 226, 226);
      box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.3);
      margin: 2px 20px 0 0px;
      border-radius: 5px;
      width: 50%;
      .top_box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 7px 20px;
        border-bottom: 1px solid #eee;
        .top_l {
          display: flex;
          align-items: center;
          font-weight: 700;
          img {
            width: 30px;
            margin-right: 10px;
          }
        }
      }
    }
  }
  .centerBox {
    margin: 10px 20px 0 20px;
    display: flex;
    .right_box {
      border: 1px solid rgb(226, 226, 226);
      box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.3);
      margin: 2px 0px 0 0px;
      border-radius: 5px;
      width: 30%;
      .nav_box {
        height: 240px;
        overflow: auto;
        .nav {
          font-weight: 700;
          font-size: 16px;
          span {
            width: 33.33333%;
            text-align: center;
            display: inline-block;
            margin-top: 5px;
          }
        }
        .content {
          font-size: 15px;
          span {
            width: 33.33333%;
            text-align: center;
            display: inline-block;
            margin-top: 5px;
          }
        }
      }
      .top_box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 7px 20px;
        border-bottom: 1px solid #eee;
        .top_l {
          display: flex;
          align-items: center;
          font-weight: 700;
          img {
            width: 30px;
            margin-right: 10px;
          }
        }
      }
    }
    .center_box {
      border: 1px solid rgb(226, 226, 226);
      box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.3);
      margin: 2px 20px 0 0px;
      border-radius: 5px;
      width: 41%;
      .top_box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 7px 20px;
        border-bottom: 1px solid #eee;
        .top_l {
          display: flex;
          align-items: center;
          font-weight: 700;
          img {
            width: 30px;
            margin-right: 10px;
          }
        }
      }
    }
    .left_box {
      border: 1px solid rgb(226, 226, 226);
      box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.3);
      margin: 2px 20px 0 0px;
      border-radius: 5px;
      width: 30%;
      .top_box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 7px 20px;
        border-bottom: 1px solid #eee;
        .top_l {
          display: flex;
          align-items: center;
          font-weight: 700;
          img {
            width: 30px;
            margin-right: 10px;
          }
        }
      }
    }
  }
  .topBox {
    margin: 0 20px;
    display: flex;
    .bottom {
      display: flex;
      justify-content: space-around;
      padding: 0px 20px;
      .item {
        font-size: 15px;
        width: 100px;
        text-align: center;
      }
    }
    .right_box {
      display: flex;
      justify-content: space-between;
      width: 50%;
      .numberBox {
        position: relative;
        .title {
          width: 100%;
          position: absolute;
          text-align: center;
          top: 8%;
          color: #fff;
          font-size: 18px;
          font-weight: 700;
        }
        .num {
          position: absolute;
          top: 37%;
          right: 40%;
          font-size: 50px;
          font-style: normal;
          color: #fff;
        }
        .size {
          position: absolute;
          top: 44%;
          left: 70%;
          font-size: 26px;
          font-style: normal;
          color: #fff;
        }
      }
    }
    .left_box {
      border: 1px solid rgb(226, 226, 226);
      box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.3);
      margin: 2px 20px 0 0px;
      border-radius: 5px;
      width: 50%;
      .top_box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 7px 20px;
        border-bottom: 1px solid #eee;
        .top_l {
          display: flex;
          align-items: center;
          font-weight: 700;
          img {
            width: 30px;
            margin-right: 10px;
          }
        }
      }
    }
  }
  .top {
    position: relative;
    background-color: #fff;
    border-radius: 5px;
    padding: 16px 20px;
    margin: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgb(226, 226, 226);
    box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.3);
    .ico1 {
      position: absolute;
      left: 20px;
      top: 50%;
      font-size: 0;
      transform: translateY(-50%);
      img {
        width: 200px;
      }
    }
    .title {
      color: #000;
      font-size: 28px;
      font-weight: 700;
    }
  }
}
</style>

